<%--
  Created by IntelliJ IDEA.
  User: 陈熠
  Date: 2017/7/10
  Time: 17:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>上传控件</title>
    <%@ include file="/common/jsp/resource.jsp" %>
</head>
<body>
<div class="layui-input-inline">
    <button class="layui-btn" onclick="submitCode()">提交代码</button>
</div>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">代码</li>
        <li>效果</li>
        <li>参数详解</li>

    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <code style="margin-top: 4px; display: block;">上传控件使用示例</code>
            <textarea class="layui-textarea" rows="20">
                 <form class="layui-form " action="">
                <div class="layui-form-item">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>上传多张图片</legend>
                    </fieldset>
                    <div class="layui-input-block">
                        <span cyType="uploadTool"
                              cyProps="url:'/getData/uploadFiles/',name:'files[]',uploadId:'upload1',multiple: true">
                            <i class="fa fa-cloud-upload">&nbsp;</i>上传图片
                        </span>
                    </div>

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>上传单张图片</legend>
                    </fieldset>
                    <div class="layui-input-inline">
                        <span cyType="uploadTool"
                              cyProps="url:'/getData/uploadFile/',name:'file',uploadId:'upload2',multiple: false">
                            <i class="fa fa-cloud-upload">&nbsp;</i>上传图片
                        </span>
                    </div>
                </div>
            </form>
           </textarea>

        </div>
        <div class="layui-tab-item " id="result">
            <form class="layui-form " action="">
                <div class="layui-form-item">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>上传多张图片</legend>
                    </fieldset>
                    <div class="layui-input-block">
                        <span cyType="uploadTool"
                              cyProps="url:'/getData/uploadFiles/',value:'/statics/img/timg.jpg,/statics/img/timg.jpg',name:'files[]',uploadId:'upload1',multiple: true">
                            <i class="fa fa-cloud-upload">&nbsp;</i>上传图片
                        </span>
                    </div>

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>上传单张图片</legend>
                    </fieldset>
                    <div class="layui-input-inline">
                        <span cyType="uploadTool"
                              cyProps="url:'/getData/uploadFile/',value:'/statics/img/timg.jpg',name:'file',uploadId:'upload2',multiple: false">
                            <i class="fa fa-cloud-upload">&nbsp;</i>上传图片
                        </span>

                    </div>
                </div>
            </form>

        </div>
        <div class="layui-tab-item">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>组件参数</th>
                    <th>描述</th>
                    <th>默认值</th>
                    <th>代码示例</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>cyType</td>
                    <td>控件类型</td>
                    <td><span style="color:red">必填</span></td>
                    <td>cyType="uploadTool"</td>
                </tr>
                <tr>
                    <td>cyProps:url</td>
                    <td>上传地址</td>
                    <td>/getData/uploadFile/</td>
                    <td>cyProps="url:'/getData/uploadFile/'"</td>
                </tr>
                <tr>
                    <td>value</td>
                    <td>默认显示图片(多图以逗号隔开)</td>
                    <td>null</td>
                    <td>cyProps="value:'/static/cy.img,/static/test.img'"||cyProps="value:'\${model.imgUrl}'" </td>
                </tr>
                <tr>
                    <td>cyProps:name</td>
                    <td>用于表单提交</td>
                    <td>null</td>
                    <td>cyProps="name:'files[]'"</td>
                </tr>
                <tr>
                    <td>cyProps:uploadId</td>
                    <td>控件id(必须保证唯一性)</td>
                    <td><span style="color:red">必填</span></td>
                    <td>cyProps="uploadId:'uploadImg'"</td>
                </tr>
                <tr>
                    <td>cyProps:multiple</td>
                    <td>是否可上传多个文件</td>
                    <td>false</td>
                    <td>cyProps="multiple:'true'"</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
<script>

    layui.use('upload', function () {
        var upload = layui.upload;
    });

    layui.use('element', function () {
    });
    function submitCode() {
        var code = $("textarea").val();
        $("#result").html(code);
        var uploads = $("#result").find("[cyType='uploadTool']");
        for (var i = 0; i < uploads.length; i++) {
            $(uploads[i]).uploadTool();
        }
        layui.use('form', function () {
            var form = layui.form();
            form.render('select');
        });
        alert("代码提交成功,请查看效果!");
    }
</script>
</body>
</html>
